import React, {Component} from "react";
import {Redirect, Link} from "react-router-dom";

import {Form, Input, Button,} from "antd";
import {connect} from "react-redux";
import DocumentTitle from "react-document-title";
import "./index.less";
import {getUserInfo, userLogin} from "../../store/actions";
import {getVerify} from "@/api/login";


class Login extends Component{
    constructor(props) {
        super(props);
       this.state = {
           verifyUrl: null,
       }
        this.token = props.token;
        this.userLogin = props.userLogin.bind(this)
        this.getUserInfo = props.getUserInfo.bind(this)
        this.onFinish = this.onFinish.bind(this)
        this.getVerify = this.getVerify.bind(this)
    }
    //  验证用户数据
    onFinish (values) {
        this.userLogin(values).then(res => {
            if (res.code === 200) {
                // // 获取用户信息
                this.UserInfo();
            }
        }).catch(() => {
            this.getVerify()
        })
    };

    // 获取用户信息
   UserInfo = () => {
        this.getUserInfo()
            .then((res) => {
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                this.props.history.push('/')
            })
            .catch((error) => {

            });
    };
    //验证码
    getVerify = () => {
        getVerify().then(res => {
            if(res.code === 200) {
                this.setState({
                    verifyUrl: res.data
                })
            }
        })
    }

   componentDidMount() {
      this.getVerify()
   }


    render() {
       if (this.token) {
           return <Redirect to="/dashboard"/>;
       }
       return (
           <DocumentTitle title={"用户登录"}>
               <div className="login_container">
                   <div className="form">
                       <div className='logo'>
                           <h2>管理后台登陆</h2>
                       </div>
                       <Form name="normal_login"
                             onFinish={this.onFinish}
                             initialValues={{
                                 remember: true,
                             }}>
                           <Form.Item
                               name="userName"
                               id='userName'
                               rules={[{required: true, message: '用户名是必填得'}]}
                           >
                               <Input placeholder="请输入用户名" className='borderR'

                               />
                           </Form.Item>
                           <Form.Item
                               name="password"
                               id='password'
                               rules={[{required: true, message: '密码是必填得'}]}
                           >
                               <Input placeholder="请输入密码" className='borderR'/>
                           </Form.Item>
                           <Form.Item
                               name="code"
                               id='code'
                               rules={[{required: true, message: '密码是必填得'}]}
                           >
                               <div className='flex'>
                                   <Input placeholder="请输入验证码" className='borderR mr10'/>
                                   <img src={this.state.verifyUrl} alt="" width={140} height={40} onClick={this.getVerify}/>
                               </div>
                           </Form.Item>

                           <Form.Item
                           >
                               <Button type="primary" block={true} shape="round" htmlType="submit">登陆</Button>
                           </Form.Item>
                       </Form>
                       <div className='foot'>
                           <Link to='/resiger'>
                               <span>还没有账号吗？点我去注册</span>
                           </Link>
                       </div>
                   </div>
               </div>
           </DocumentTitle>
       );
   }
};

export default connect((state) => state.user, { userLogin, getUserInfo })(Login)

